<template>
    <div class="register">
        <div class="register-content">
            <h2>新用户注册</h2>
            <p class="desc">很高兴您将成为商城的会员（注册只需一步）</p>
            <!--
                在vue2中 v-model其实就是一个v-bind:value 和 @input事件的组合
                但是在vue3中对v-model指令进行了修改 不在是v-bind:value了
                而是改为了绑定一个modelValue
             -->
            <my-input v-model="form.mobile" placeholder="手机号码">
                <van-icon class="reginter-icon" name="desktop-o" />
            </my-input>
            <my-input :type="pwdtype" v-model="form.pwd" placeholder="密码">
                <van-icon class="reginter-icon" @click="changePwdType" :name="pwdName" />
            </my-input>
            <my-input type="password" v-model="form.certainPwd" placeholder="确认密码">
                <van-icon class="reginter-icon" name="closed-eye" />
            </my-input>
            <my-input v-model="form.nikename" placeholder="用户名">
                <van-icon class="reginter-icon" name="contact" />
            </my-input>
            <my-input v-model="form.code" placeholder="验证码">
                <img class="code-img" :src="codeImg" @click="changeCode" />
            </my-input>
            <my-input v-model="form.code" @click="show" :readonly="true" placeholder="选择地址"></my-input>
            <my-input v-model="form.code" placeholder="验证码">
                <span class="code" @click="getCode">{{text}}</span>
            </my-input>

            <div class="register-btn">立即注册</div>
            <router-link to="/login" v-slot="{navigate}">
                <p class="go-login" @click="navigate">已有账号？立即登录</p>
            </router-link>
        </div>
        <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker
                :default-index="0"
                :columns="columns"
                :columns-field-names="customFieldName"
                @cancel="showPicker = false"
                @change="select"
            />
        </van-popup>
    </div>
</template>

<script>
import myInput from '@/components/myInput/myInput'
import { reactive, toRefs, watch } from 'vue'
import { getProvinces, getChildArea } from '@/api'
export default {
    components: {
        myInput
    },
    setup() {
        let timer = null
        let state = reactive({
            form: {
                mobile: '',
                pwd: '',
                certainPwd: '',
                nikename: '',
                code: ''
            },
            columns: [
                // 第一列
                {
                    values: [],
                    defaultIndex: 2,
                },
                // 第二列
                {
                    values: [],
                    defaultIndex: 1,
                },
            ],
            showPicker: false,
            text: '获取验证码',
            pwdtype: 'password',
            pwdName: 'closed-eye',
            codeImg: 'https://api.it120.cc/small4/verification/pic/get?key=' + new Date().getTime()
        })

        const customFieldName = {
            text: 'name'
        };
        // 在setup中使用watch监听方法
        // 第一个参数是要监听的数据 第二个参数是数据变化后触发的回调函数
        // 第三个是是否开启深度监听等配置
        // watch(() => state.form, (to) => {
        //     console.log(to)
        // }, {
        //     deep: true
        // })
        function show() {
            state.showPicker = true
            // console.log(state.showPicker)
        }

        // 请求省份数据
        getProvinces().then(res => {
            // console.log(res)
            state.columns[0].values = res.data
        })

        // 先获取默认待选择的城市数据
        getChildArea(130000).then(res => {
            // console.log(res)
            state.columns[1].values = res.data
        })

        // 选择地址触发的函数
        function select(values) {
            // console.log(values)
            getChildArea(values[0].id).then(res => {
                // console.log(res)
                state.columns[1].values = res.data
            })
        }

        // 改变密码类型的方法
        function changePwdType() {
            if(state.pwdtype == "password") {
                state.pwdtype = 'text'
                state.pwdName = 'eye-o'
            } else {
                state.pwdtype = "password"
                state.pwdName = 'closed-eye'
            }
        } 
        // 获取验证码进入倒计时的方法
        function getCode() {
            if(state.text == "获取验证码") {
                let num = 60
                timer = setInterval(() => {
                    if(num > 0) {
                        num--
                        state.text = num + '秒后再试'
                    } else {
                        clearInterval(timer)
                        state.text = '获取验证码'
                    }
                }, 1000)
            }
        }

        // 改变验证码的方法
        function changeCode() {
            state.codeImg = 'https://api.it120.cc/small4/verification/pic/get?key=' + new Date().getTime()
        }
        return {
            ...toRefs(state),
            show,
            customFieldName,
            select,
            getCode,
            changePwdType,
            changeCode
        }
    }
 }
</script>

<style scoped lang="scss">
.register {
    background-color: #fff;
    height: 100%;
    padding: 30px;
    overflow: auto;
    h2 {
        font-size: 50px;
        margin: 60px 0;
    }
    .desc {
        color: #888;
        line-height: 40px;
        font-size: 28px;
        margin-bottom: 30px;
    }
    .register-content {
        border: 1px solid #f5f5f5;
        padding: 30px 80px;
        font-size: 30px;
    }
    .reginter-icon {
        color: #888;
        margin-right: 20px;
    }
    .code-img {
        height: 100%;
        width: 300px;
    }
    .code {
        font-size: 26px;
        flex-basis: 400px;
        height: 100%;
        border-left: 1px solid #ccc;
        text-align: center;
        line-height: 90px;
    }
    .register-btn {
        width: 462px;
        height: 90px;
        margin: 0 auto;
        margin-top: 40px;
        color: #fff;
        background-image: linear-gradient(90deg, #5ea6f8, #bb87f6);
        text-align: center;
        line-height: 90px;
        border-radius: 10px;
        margin-bottom: 50px;
    }
    .go-login {
        text-align: center;
        color: #549ff9;
    }
}
</style>